import { useState, useEffect } from "react";
import { Button, Card, Descriptions } from "antd";
import { useStore } from "@/store";
import { formatMoney, formatNum, formatState } from "@/utils";
import { getReportData, getLineData, getPieCityData, getPieAgeData, getRadarData } from "@/api";
import type { Dashboard } from "@/types/api";
import { useCharts } from "@/hook/useCharts";
import styles from "./index.module.scss";
export default function DashBoard() {
    const userInfo = useStore(state => state.userInfo);
    const [report, setReport] = useState<Dashboard.ReportData>();
    const [lineRef, lineChart] = useCharts();
    const [pieRef1, pieChart1] = useCharts();
    const [pieRef2, pieChart2] = useCharts();
    const [radarRef, radarChart] = useCharts();
    useEffect(() => {
        getReport();
        renderLineChart();
        renderPieCityData();
        renderPieAgeData();
        renderRadarData();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [lineChart, pieChart1, pieChart2, radarChart]);
    const descrtionList = [
        {
            title: "用户ID",
            desc: userInfo.userId,
        },
        {
            title: "邮箱",
            desc: userInfo.userEmail,
        },
        {
            title: "状态",
            desc: formatState(userInfo.state),
        },
        {
            title: "手机号",
            desc: userInfo.mobile,
        },
        {
            title: "岗位",
            desc: userInfo.job,
        },
        {
            title: "部门",
            desc: userInfo.deptName,
        },
    ];
    const descList = [
        {
            title: "司机数量",
            desc: `${formatNum(report?.driverCount)}个`,
        },
        {
            title: "总流水",
            desc: `${formatMoney(report?.totalMoney)}元`,
        },
        {
            title: "总订单",
            desc: `${formatNum(report?.orderCount)}单`,
        },
        {
            title: "开通城市",
            desc: `${formatNum(report?.cityNum)}座`,
        },
    ];

    //获取折线图数据
    const renderLineChart = async () => {
        if (!lineChart) return;
        const data = await getLineData();
        lineChart?.setOption({
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: ["订单", "流水"],
            },
            grid: {
                left: 50,
                right: 50,
                bottom: 20,
            },
            xAxis: {
                data: data.label,
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    name: "订单",
                    type: "line",
                    data: data.order,
                },
                {
                    name: "流水",
                    type: "line",
                    data: data.money,
                },
            ],
        });
    };

    //获取饼状图城市数据
    const renderPieCityData = async () => {
        if (!pieChart1) return;
        const data = await getPieCityData();
        pieChart1?.setOption({
            title: {
                text: "司机城市分布",
                left: "center",
            },
            tooltip: {
                trigger: "item",
            },
            legend: {
                orient: "vertical",
                left: "left",
            },
            series: [
                {
                    name: "城市分布",
                    type: "pie",
                    radius: "50%",
                    data,
                },
            ],
        });
    };

    //获取饼状图年龄数据
    const renderPieAgeData = async () => {
        if (!pieChart2) return;
        const data = await getPieAgeData();
        pieChart2?.setOption({
            title: {
                text: "司机年龄分布",
                left: "center",
            },
            tooltip: {
                trigger: "item",
            },
            legend: {
                orient: "vertical",
                left: "left",
            },
            series: [
                {
                    name: "年龄分布",
                    type: "pie",
                    radius: [50, 180],
                    roseType: "area",
                    data,
                },
            ],
        });
    };

    //获取雷达图数据
    const renderRadarData = async () => {
        if (!radarChart) return;
        const data = await getRadarData();
        radarChart?.setOption({
            legend: {
                data: ["司机模型诊断"],
            },
            radar: {
                indicator: data.indicator,
            },
            series: [
                {
                    name: "模型诊断",
                    type: "radar",
                    data: data.data,
                },
            ],
        });
    };

    //获取描述数据
    const getReport = async () => {
        const data = await getReportData();
        setReport(data);
    };

    const handleRresh = () => {
        renderPieCityData();
        renderPieAgeData();
    };
    return (
        <div className={styles.dashBoard}>
            <div className={styles.userInfo}>
                <img src="/imgs/avatar.png" className={styles.userImg} />
                <Descriptions title="欢迎 Leach">
                    {descrtionList.map((item, index) => {
                        return (
                            <Descriptions.Item label={item.title} key={index}>
                                {item.desc}
                            </Descriptions.Item>
                        );
                    })}
                </Descriptions>
            </div>
            <div className={styles.report}>
                {descList.map((item, index) => {
                    return (
                        <div className={styles.card} key={index}>
                            <div className={styles.title}>{item.title}</div>
                            <div className={styles.data}>{item.desc}</div>
                        </div>
                    );
                })}
            </div>
            <div className={styles.chart}>
                <Card
                    title="订单流水走势图"
                    extra={
                        <Button type="primary" onClick={renderLineChart}>
                            刷新
                        </Button>
                    }>
                    <div ref={lineRef} className={styles.itemChart}></div>
                </Card>
            </div>
            <div className={styles.chart}>
                <Card
                    title="司机分布"
                    extra={
                        <Button type="primary" onClick={handleRresh}>
                            刷新
                        </Button>
                    }>
                    <div className={styles.pieChart}>
                        <div ref={pieRef1} className={styles.itemPie}></div>
                        <div ref={pieRef2} className={styles.itemPie}></div>
                    </div>
                </Card>
            </div>
            <div className={styles.chart}>
                <Card
                    title="模型诊断"
                    extra={
                        <Button type="primary" onClick={renderRadarData}>
                            刷新
                        </Button>
                    }>
                    <div ref={radarRef} className={styles.itemChart}></div>
                </Card>
            </div>
        </div>
    );
}
